<template>
  <div>
    御剑乘风来,除魔天地间!
    <hr />
    <MyTable :list="list">
      <template #look="{ obj }">
        {{ obj.id }}
        <button @click="lookHandel(obj)">编辑</button>
        <button @click="del(obj.id)">删除</button>
        <button @click="add">添加</button>
      </template>
    </MyTable>

    <DiaLog title="模态框" :showFlag="showFlag">
      <template>
        书名: <input type="text" v-model="fromData.bookname" /> <br />
        作者: <input type="text" v-model="fromData.author" /> <br />
        出版社: <input type="text" v-model="fromData.publisher" /> <br />
        <button @click="qd">确认</button>
        <button @click="gb">取消</button>
      </template>
    </DiaLog>
  </div>
</template>
<script>
import MyTable from './components/MyTable.vue'
import DiaLog from './components/Dialog.vue'
import axios from 'axios'
export default {
  name: 'app',
  components: {
    MyTable,
    DiaLog
  },
  data () {
    return {
      showFlag: false,
      fromData: {
        bookname: '',
        author: '',
        publisher: '',
        id: ''
      },
      list: [

      ],
    }
  },
  //在创建后就 获取图书信息
  async created () {
    const res = await axios({
      url: 'http://ajax-api.itheima.net/api/books'
    })
    // console.log(res.data.data)
    this.list = res.data.data
  },
  computed: {
  },
  methods: {
    // 删除功能
    async del (id) {
      //这里是删除后台数据
      await axios.delete('http://ajax-api.itheima.net/api/books/' + id)
      //这里是渲染更新数据用户界面
      this.list = this.list.filter(item => item.id != id)
    },


    //点击编辑表单获取到相应数据
    lookHandel (obj) {
      this.showFlag = true
      //深拷贝下
      this.fromData = JSON.parse(JSON.stringify(obj))

    },

    //关闭姆态框
    gb () {
      this.showFlag = false
      //这里清空是为了下次点击添加的时候判断  时候有id值
      this.fromData = {
        bookname: '',
        author: '',
        publisher: '',
        id: ''
      }
    },
    async qd () {
      if (this.fromData.id != '') {
        //编辑功能
        const data = this.fromData
        await axios({
          url: 'http://ajax-api.itheima.net/api/books/' + this.fromData.id,
          method: 'put',
          data
        })


        const obj1 = this.list.find(item => item.id == this.fromData.id)
        obj1.bookname = this.fromData.bookname
        obj1.author = this.fromData.author
        obj1.publisher = this.fromData.publisher
        obj1.id = this.fromData.id

        //清空
        this.fromData = {
          bookname: '',
          author: '',
          publisher: '',
          id: ''
        }
      } else {

        //添加功能
        const data = this.fromData
        const res = await axios({
          url: 'http://ajax-api.itheima.net/api/books',
          method: 'post',
          data
        })
        // console.log(res, 1111)
        //把添加 之后的push 到数组中重新渲染
        this.list.push(res.data.data)
        //清空
        this.fromData = {
          bookname: '',
          author: '',
          publisher: '',
          id: ''
        }

      }
      //关闭模态框
      this.showFlag = false
    },
    add () {
      this.showFlag = true

    }
  }
}
</script>
<style lang='less'  scoped>
</style>
